<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">countdown-verify</view>
			<view class="tui-page__desc">短信验证码倒计时，可重置，可设置样式</view>
		</view>
		<view class="tui-verify__container">
			<view class="tui-title">默认使用</view>
			<tui-countdown-verify :successVal="successVal" @send="send" :params="1"></tui-countdown-verify>
		</view>
		<view class="tui-verify__container">
			<view class="tui-title">默认为倒计时状态</view>
			<tui-countdown-verify :successVal="successVal_9" @send="send" :params="9" start></tui-countdown-verify>
		</view>
		<view class="tui-verify__container">
			<view class="tui-title">设置圆角</view>
			<tui-countdown-verify radius="100rpx" :successVal="successVal_2" @send="send" :params="2"></tui-countdown-verify>
		</view>
		<view class="tui-verify__container">
			<view class="tui-title">设置颜色</view>
			<tui-countdown-verify background="#000000" color="#fff" borderColor="#000000" :successVal="successVal_3" @send="send" :params="3"></tui-countdown-verify>
		</view>
		<view class="tui-verify__container">
			<view class="tui-title">设置大小</view>
			<tui-countdown-verify
				width="240rpx"
				color="#000000"
				borderColor="#000000"
				height="72rpx"
				:size="28"
				:successVal="successVal_4"
				@send="send"
				:params="4"
			></tui-countdown-verify>
		</view>
		<view class="tui-verify__container">
			<view class="tui-title">设置秒数为120</view>
			<tui-countdown-verify :seconds="120" :successVal="successVal_5" @send="send" :params="5"></tui-countdown-verify>
		</view>
		<view class="tui-verify__container">
			<view class="tui-title">改变倒计时状态下颜色</view>
			<tui-countdown-verify :background="color" color="#fff" :borderColor="color" :successVal="successVal_6" @send="send" :params="6" @end="end"></tui-countdown-verify>
		</view>
		<view class="tui-verify__container">
			<view class="tui-title">设置文本</view>
			<tui-countdown-verify
				width="210rpx"
				text="发送短信验证码"
				sendText="发送中..."
				countdownText="秒后重新发送"
				:successVal="successVal_7"
				@send="send"
				:params="7"
				@end="end"
			></tui-countdown-verify>
		</view>
		<view class="tui-verify__container">
			<view class="tui-title">发送失败或参数错误重置</view>
			<tui-countdown-verify :successVal="successVal_8" :resetVal="resetVal" @send="send" :params="8" @end="end"></tui-countdown-verify>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			successVal: 0,
			successVal_2: 0,
			successVal_3: 0,
			successVal_4: 0,
			successVal_5: 0,
			successVal_6: 0,
			color: '#07c160',
			successVal_7: 0,
			successVal_8: 0,
			resetVal: 0,
			successVal_9: 0
		};
	},
	methods: {
		send(e) {
			let params = Number(e.params);
			if (params == 6) {
				this.color = '#999';
			} else if (params == 8) {
				setTimeout(() => {
					this.resetVal++;
					this.tui.toast('请填写正确的手机号');
				}, 200);
				return;
			}
			setTimeout(() => {
				//此处写发送短信请求逻辑
				this.tui.toast('短信发送成功');
				switch (params) {
					case 1:
						this.successVal++;
						break;
					case 2:
						this.successVal_2++;
						break;
					case 3:
						this.successVal_3++;
						break;
					case 4:
						this.successVal_4++;
						break;
					case 5:
						this.successVal_5++;
						break;
					case 6:
						this.successVal_6++;
						break;
					case 7:
						this.successVal_7++;
						break;
					case 9:
						this.successVal_9++;
						break;
					default:
						break;
				}
			}, 1000);
		},
		end() {
			this.color = '#07c160';
		}
	}
};
</script>

<style>
.container {
	padding: 20rpx 0 120rpx 0;
	box-sizing: border-box;
}
.tui-verify__container {
	padding: 40rpx;
	box-sizing: border-box;
	margin-bottom: 30rpx;
	background: #fff;
	font-size: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-title {
	font-size: 30rpx;
}
</style>
